<template>
  <div class="tags-container">
    <el-card shadow="never">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="card__header"
        v-if="this.$route.query.id"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="queryTags" ref="queryTagsRef">
        <!-- 搜索栏 -->
        <div class="tags-search">
          <el-row>
            <!-- 标签名称 -->
            <el-col :span="18">
              <el-form-item label="标签名称" label-width="80px" prop="tagName">
                <el-input v-model="queryTags.tagName"></el-input>
              </el-form-item>
              <!-- 标签名称end -->
              <!-- 状态 -->
              <el-form-item label="状态" label-width="80px" prop="state">
                <el-select v-model="queryTags.state" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <!-- 状态end -->

              <!-- 按钮搜索 -->
              <el-form-item>
                <el-button size="small" @click="resetForm">清除</el-button>
                <el-button type="primary" @click="onSubmit" size="small"
                  >搜寻</el-button
                >
              </el-form-item>
              <!-- 按钮搜索end -->
            </el-col>
            <!-- 新增标签 -->
            <el-col :span="6">
              <el-form-item class="top-right-btn">
                <el-button
                  type="text"
                  v-if="this.$route.query.id"
                  @click="$router.back()"
                >
                  <i class="el-icon-back"></i>
                  返回学科
                </el-button>
                <el-button
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  @click="handleChange()"
                  >新增标签</el-button
                >
              </el-form-item>
            </el-col>
            <!-- 新增标签end -->
          </el-row>
        </div>
      </el-form>
      <!-- 搜索栏end -->
      <!-- 警告消息 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px;"
      >
      </el-alert>
      <!-- 警告消息end -->
      <!-- 标签数据表格 -->
      <template>
        <el-table style="width: 100%" :data="tagsList">
          <el-table-column type="index" label="序号" width="80px">
          </el-table-column>
          <el-table-column :prop="queryTags.subjectID" label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="标签名称">
            <template slot-scope="scope">
              <span>{{ scope.row.tagName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ac" label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="text" @click="tagsStateClick(scope.row)">{{
                scope.row.state === 1 ? '禁用' : '启用'
              }}</el-button>
              <!-- 启用的状态下不允许修改和删除 -->
              <!-- 如果启用则 可以修改 -->
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? true : false"
                @click="handleChange(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? true : false"
                @click="tagsRmovClick(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 标签数据表格end -->
      <!-- 页码标签 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryTags.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 页码标签end -->
    </el-card>
    <tags-add
      v-if="isTagShow"
      :tags-lists="item"
      @add="getTagsList()"
      :title-text="titleText"
      :flag="isTagShow"
      @close="onClose"
    />
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags'
import tagsAdd from '../components/tags-add'
export default {
  data() {
    return {
      queryTags: {
        page: 1, // 默认获取第一页数据
        pagesize: 10, // 一页显示多少条数据，默认显示10条
        tagName: '', // 标签名称
        state: null, // 状态
        subjectID: null
      },
      tagsList: [], // 获取数据列表
      total: 0, // 获取到的总条数
      item: {},
      titleText: '', // 修改添加框文本
      isTagShow: false
    }
  },
  components: {
    tagsAdd
  },
  created() {
    this.getTagsList()
  },
  watch: {
    $route: function() {
      this.getTagsList()
    }
  },
  methods: {
    // 获取标签数据列表
    async getTagsList() {
      this.queryTags.subjectID = this.$route.query.id
        ? this.$route.query.id + ''
        : null

      console.log(this.queryTags, 555555555)
      try {
        const { data } = await list(this.queryTags)
        console.log(data)
        // 把后台数据放进tagsList空数组
        this.tagsList = data.items
        // 获取到的总条数
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取数据列表失败！')
      }
    },
    // 传递每页多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 把传过来的一页显示多少条数据val，赋值给自己定义的数据pagesize
      this.queryTags.pagesize = val
      // 如果只有一页
      if (this.queryTags.page === 1) {
        this.getTagsList(this.queryTags)
      }
    },
    // 当前页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 点击后传递过来的参数给当前页码数
      this.queryTags.page = val
      // 需要重新渲染列表
      this.getTagsList()
    },
    // 监听状态数据
    async tagsStateClick(val) {
      try {
        // 点击之后传递过来的值
        // console.log(val)
        // 发送请求调用接口告诉后端id：是点击后传过来的id
        // 状态如果是1 就是 启用状态
        await changeState({
          id: val.id,
          // val传来的数据等1是启用 那就传给后台0禁用，把启用变成禁用状态
          // 把val拿到的值传给后台
          state: val.state === 1 ? 0 : 1
        })
        val.state = val.state === 1 ? 0 : 1
        if (val.state === 1) {
          this.$message.success('启用成功！')
        } else {
          this.$message.success('禁用成功！')
        }
      } catch (err) {
        this.$message.error('修改状态失败！')
      }
    },
    // 搜索点击事件
    onSubmit() {
      // 获取列表数据
      this.getTagsList()
    },
    // 重置
    resetForm() {
      // this.queryTags.tagName = ''
      // this.queryTags.state = null
      this.$refs.queryTagsRef.resetFields()
      this.getTagsList()
    },
    // 删除列表
    async tagsRmovClick(id) {
      const tagsRmove = await this.$confirm(
        '此操作将永久删除该标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // console.log(tagsRmove)
      if (tagsRmove === 'cancel') {
        this.$message.info('已取消删除')
      }

      await remove({
        id: id
      })
      this.$message.success('删除标签成功！')
      if (document.querySelectorAll('.el-card tbody tr').length === 1) {
        this.queryTags.page =
          this.queryTags.page > 1 ? this.queryTags.page - 1 : 1
      }
      this.getTagsList()
    },
    handleChange(row) {
      if (row) {
        this.titleText = '修改标签'
        console.log(row)
        this.item = row
      } else {
        console.log(111)
        this.titleText = '新增标签'
      }
      this.isTagShow = true
      // this.$refs.tagsAdd.open()
    },
    onClose() {
      this.isTagShow = false
      this.item = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-container {
  padding: 10px;
  height: 800px;
}
.top-right-btn {
  float: right;
  margin-right: 0;
}
.pagination {
  text-align: right;
  margin-top: 20px;
}
::v-deep.card__header {
  padding-bottom: 18px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 18px;
}
</style>
